<template>
  <div class="rec-container">
    <ul class="item-container">
      <li
        class="item border-bottom"
        v-for="(item, index) of goods"
        :key="index"
        @click="itemClick(index)"
      >
        <img class="item-img" :src="'http://' + item.img" @load="imageLoad" />
        <div class="item-info">
          <p class="item-title">{{ item.title }}</p>
          <p class="item-desc">
            <span class="item-price">{{ item.price }}</span>
            <span class="item-yuanjia">{{ item.yuanjia }}</span>
            <span class="item-howp">{{ item.payment }}</span>
          </p>
          <p class="item-address">
            <span class="shopName">{{ item.shopName }}</span>
            <span class="weizhi">{{ item.place }}</span>
            <span class="spot">{{ item.spot }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// import { getHomeGoods } from "network/home";
export default {
  name: "HomeRecommend",
  props: {
    goods: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    /* 监听图片是否加载完成 */
    imageLoad() {
      this.$emit("itemImageLoad");
    },

    /* 点击列表中的每一个项跳转到详情页面 */
    itemClick(index) {
      this.$router.push("/detail/" + this.goods[index].id);
    },
  },

  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.rec-container {
  background: #eee;
  padding: 0 0.1rem 0.1rem 0.1rem;
  .item-container {
    width: 100%;
    background: #fff;
    .item {
      overflow: hidden;
      display: flex;
      .item-img {
        width: 0.69rem;
        height: 0.69rem;
        padding: 0.1rem;
      }
      .item-info {
        flex: 1;
        padding: 0.1rem;
        .item-title {
          padding-top: 0.025rem;
          font-size: 0.14rem;
        }
        .item-desc {
          .item-price {
            font-size: 0.13rem;
            color: #d72826;
          }
          .item-yuanjia {
            font-size: 0.09rem;
            color: #999;
          }
          .item-howp {
            font-size: 0.09rem;
            color: #999;
          }
        }
        .item-address {
          font-size: 0.09rem;
          color: #999;
          margin-top: 0.11rem;
          .shopName {
          }
          .weizhi {
            margin-left: 0.045rem;
          }
          .spot {
            float: right;
          }
        }
      }
    }
  }
}
</style>
